<template>
	<view class="container">
		<!-- <view class="mingxi">明细</view> -->
		<view class="com-bg">
			<view class="com">
				<view class="com-top">
					<view class="com-top-left">
						<text class="text">账户余额(元)</text>
						<text class="balance">{{ moneyInfo.nowMoney || 0 }}</text>
					</view>
					<view class="com-top-right" @click="toTixian">
						<img
							src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1733631493822tYoiSaN15Nw21e98d17961a494bcb9b2fd370eb9930b.png"
						/>
					</view>
				</view>
				<view class="com-bottom">
					<view class="bottom-item">
						<view class="label">总招生人数</view>
						<view class="content">{{ moneyInfo.amount || 0 }}人</view>
					</view>
					<view class="bottom-item" v-if="userInfo.userRole > 0">
						<view class="label">裂变招生人数</view>
						<view class="content">{{ moneyInfo.fissionAmount || 0 }}人</view>
					</view>
					<view class="bottom-item" v-if="userInfo.userRole > 0">
						<view class="label">昨日收入</view>
						<view class="content">{{ amount.upMoney || 0 }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="com-detail">
			<view class="detail_title">提现金额</view>
			<view class="money_boxw">
				<view
					:class="{ money_box: true, check_money_box: checkIdx == idx }"
					v-for="(t, idx) in numList"
					:key="idx"
					@click="setCheckIdx(idx, t)"
					>{{ t == '全部' ? t : '￥' + t }}</view
				>
			</view>
			<view class="shuru_box">
				<view class="icon">￥</view>
				<input v-model="form.money" placeholder="输入自定义金额" />
			</view>
			<view class="btn_box" @click="todiaLog">提现</view>
		</view>
		<view class="dialog_box" v-if="showDialog" @click="showDialog = false">
			<view class="dialog_content" @click.stop="">
				<u-form :label-style="labelStyle" :model="form" ref="uForm" label-position="top" class="form" :border-bottom="false">
					<!-- 机构 -->
					<u-form-item label="银行卡号" :border-bottom="false">
						<view class="input-box">
							<u-input v-model="form.bankNumber" placeholder="请输入银行卡号" />
						</view>
					</u-form-item>
					<u-form-item label="持卡人姓名" :border-bottom="false">
						<view class="input-box">
							<u-input v-model="form.name" placeholder="请输入持卡人姓名" />
						</view>
					</u-form-item>
					<u-form-item label="开户银行" :border-bottom="false">
						<view class="input-box">
							<u-input v-model="form.bankName" placeholder="请输入开户银行" />
						</view>
					</u-form-item>
					<u-form-item label="开户银行支行" :border-bottom="false">
						<view class="input-box">
							<u-input v-model="form.bankAddress" placeholder="请输入开户银行支行" />
						</view>
					</u-form-item>
					<u-form-item label="提现金额" :border-bottom="false">
						<view style="color: #f95513; font-size: 60rpx">￥{{ form.money }}</view>
					</u-form-item>
					<view class="submit-btn" @click="submitForm">确认提现</view>
				</u-form>
			</view>
		</view>
	</view>
</template>

<script>
import { getBillInfo, applyWithdrawal, getInviteInfo } from '@/api/yanxue/user'
export default {
	data() {
		return {
			numList: [100, 200, 500, 1000, 2000, '全部'],
			moneyInfo: {},
			checkIdx: -1,
			form: {
				bankNumber: '',
				name: '',
				bankName: '',
				bankAddress: '',
				money: ''
			},
			showDialog: false,
			userInfo: {}
		}
	},
	onLoad() {
		console.log(this.$store.state.user.userInfo)
		this.userInfo = this.$store.state.user.userInfo
		this.getBillInfoData()
	},
	methods: {
		submitForm() {
			let errTips = {
				bankAddress: '请输入开户银行支行',
				bankName: '请输入开户银行',
				bankNumber: '请输入银行卡号',
				name: '请输入持卡人姓名'
			}
			for (const key in this.form) {
				if (!this.form[key] && key !== 'money') {
					return uni.showToast({ title: errTips[key], icon: 'none' })
				}
			}
			let obj = {
				...this.form
			}
			const app = this
			uni.showModal({
				title: '温馨提示',
				content: '确认当前信息填写无误并提现？',
				success: o => {
					if (o.confirm) {
						applyWithdrawal(obj).then(res => {
							uni.showToast({ title: '提现成功', icon: 'none' })
							app.$navTo('pages/mine/index')
						})
					}
				}
			})
		},
		setCheckIdx(idx, val) {
			if (val <= this.moneyInfo.nowMoney || val == '全部') {
				this.form.money = this.moneyInfo.nowMoney
				this.checkIdx = idx
			} else {
				uni.showToast({
					title: '提现金额不能大于账户余额',
					icon: 'none'
				})
			}
		},
		todiaLog() {
			if (!this.form.money) {
				return uni.showToast({
					title: '请输入提现金额',
					icon: 'none'
				})
			}
			if (this.form.money > this.moneyInfo.nowMoney) {
				return uni.showToast({
					title: '提现金额不能大于账户余额',
					icon: 'none'
				})
			}
			this.showDialog = true
		},
		getBillInfoData() {
			let API = getInviteInfo
			if (this.userInfo.userRole > 0) {
				API = getBillInfo
			}
			API().then(res => {
				this.moneyInfo = res.result
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: #f6f6f6;
}
.mingxi {
	text-align: right;
	padding-right: 24rpx;
	margin-top: 20rpx;
	font-family: HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 36rpx;
	color: #000000;
}

.com-bg {
	width: 100%;
	height: 416rpx;
	background: linear-gradient(0deg, #c1f26c 0%, #ffffff 100%);
	border-radius: 60rpx;

	.com {
		width: 702rpx;
		height: 380rpx;
		background: #ffffff;
		border-radius: 48rpx;
		margin: 0 auto;
		margin-top: 24rpx;

		.com-top {
			display: flex;
			justify-content: space-between;
			width: 702rpx;
			height: 240rpx;
			background: linear-gradient(0deg, #ffa233 0%, #f95513 100%);
			border-radius: 48rpx;
			padding: 30rpx 60rpx 0 48rpx;

			.com-top-left {
				display: flex;
				flex-direction: column;
				text-align: left;

				.text {
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #fffefe;
				}

				.balance {
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 86rpx;
					color: #fffefe;
					margin-top: 44rpx;
				}
			}

			.com-top-right {
				display: flex;
				justify-content: center;
				align-items: center;
				img {
					width: 256rpx;
					height: 246rpx;
					position: fixed;
					top: 0;
					right: 70rpx;
				}
			}
		}

		.com-bottom {
			display: flex;
			justify-content: center;
			padding: 0 70rpx;
			margin-top: 30rpx;

			.bottom-item {
				display: flex;
				flex-direction: column;
				text-align: left;
				width: 230rpx;
				text-align: center;
				.label {
					font-family: HarmonyOS Sans SC;
					font-weight: 400;
					font-size: 23rpx;
					color: #f95513;
					text-align: center;
					line-height: 23rpx;
				}

				.content {
					font-family: HarmonyOS Sans SC;
					font-weight: 500;
					font-size: 50rpx;
					color: #f95513;
					margin-top: 22rpx;
					line-height: 50rpx;
				}
			}
		}
	}
}

.com-detail {
	width: 702rpx;
	height: 964rpx;
	background: #ffffff;
	box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);
	border-radius: 48rpx;
	overflow: hidden;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	padding: 30rpx 40rpx;
	.detail_title {
		height: 46rpx;
		border-left: 12rpx solid #f95513;
		padding-left: 28rpx;
		line-height: 46rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 34rpx;
		color: #010101;
		margin-bottom: 50rpx;
	}
	.money_boxw {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.money_box {
		width: 190rpx;
		height: 96rpx;
		line-height: 96rpx;
		background: #ffe0d3;
		border-radius: 20rpx;
		margin-right: 20rpx 24rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 500;
		font-size: 40rpx;
		color: #f78252;
		text-align: center;
		margin-bottom: 24rpx;
	}
	.check_money_box {
		background: #f95513;
		color: #ffffff;
	}
	.shuru_box {
		width: 610rpx;
		height: 96rpx;
		background: #f8f8f8;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		.icon {
			font-family: HarmonyOS Sans SC;
			font-weight: 500;
			font-size: 40rpx;
			color: #f95513;
			margin: 0 28rpx 0 30rpx;
		}
		input {
			font-size: 32rpx;
		}
	}
	.btn_box {
		position: fixed;
		left: 24rpx;
		bottom: 68rpx;
		width: 702rpx;
		height: 118rpx;
		background: #f95513;
		border-radius: 59rpx;
		line-height: 118rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 38rpx;
		text-align: center;
		color: #fffefe;
	}
}
.dialog_box {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	background: rgba(0, 0, 0, 0.7);
	.dialog_content {
		z-index: 9;
		position: absolute;
		left: 0;
		bottom: 0;
		border-radius: 30rpx 30rpx 0 0;
		width: 750rpx;
		padding: 24rpx;
		height: 90%;
		background: #fff;
		.input-box {
			width: 100%;
			height: 84rpx;
			border-radius: 84rpx;
			background-color: #e8e8e8;
			display: flex;
			// justify-content: center;
			align-items: center;
			padding: 7rpx 50rpx;
			u-input {
				width: 100%;
				height: 100%;
				border: none;
				background-color: #e8e8e8;
				font-family: HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #010101;
			}
		}
		.submit-btn {
			width: 100%;
			height: 84rpx;
			border-radius: 84rpx;
			color: #010101;
			line-height: 84rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			background: #f95513;
			color: #fff;
			font-family: HarmonyOS Sans SC;
			font-weight: 400;
			font-size: 36rpx;

			margin-top: 40rpx;
		}
	}
}
</style>
